<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>margin.html</title>
    <style type="text/css">
        p {
            padding: 0;
            margin: 0;
        }

        .all {
            width: 630px;
            height: 45px;
            margin: 50px auto;
            background-color: #192132;
            padding-left: 20px;
            border-bottom: 3px solid #000;
        }

        span {
            display: inline-block;
            width: 100px;
            height: 45px;
            border-bottom: 3px solid #1ba2c7;
        }

        .dg1 {
            float: unset;
            border-style: solid;
            background: #39f;
            text-align: center;
            float: unset;
            margin: 1px;
        }

        .dg2 {
            float: left;
            z-index: 0;
            width: 200px;
            height: 500px;
            border-style: solid;
            background: rgba(7, 224, 231, 0.705);
            text-align: center;
            margin: 1px;
            background-image: linear-gradient(30deg, #0f0, #00f);
        }

        .dg3 {
            float: right;
            z-index: 0;
            width: 200px;
            height: 500px;
            border-style: solid;
            background: rgb(36, 255, 135);
            text-align: center;
            margin: 1px;
            box-shadow: inset;
        }

        .d1 {
            border-style: solid;
            text-align: center;
            margin: 1px;

        }

        .d2 {
            border-style: solid;
            text-align: center;
            margin: 1px;
        }

        .d3 {
            border-style: solid;
            text-align: center;
            margin: 1px;
        }

        .s1 {
            font-size: 50px;
            padding-right: 50px;
        }

        .s2 {
            font-size: 50px;
            padding-right: 50px;
        }

        .s3 {
            font-size: 50px;
            padding-right: 50px;
        }

        .s4 {
            font-size: 50px;
            padding-right: 50px;
        }

        .one {
            background: url(./tp/1.png) no-repeat;
        }

        .two {
            background: url(./tp/2.png) no-repeat;
        }

        .three {
            background: url(./tp/3.png) no-repeat;
        }

        .four {
            background: url(./tp/4.png) no-repeat;
        }

        .five {
            background: url(./tp/5.png) no-repeat;
        }

        .six {
            background: url(./tp/6.png) no-repeat;
        }
    </style>
</head>

<body background="https://file.99ziyuan.net/d/file/2021-08-15/8eeccaae2f41362e338601658ccae96e.jpg" style="background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:100% 100%;
    opacity: 50%;">
    <div class="all">
        <span class="one"></span>
        <span class="two"></span>
        <span class="three"></span>
        <span class="four"></span>
        <span class="five"></span>
        <span class="six"></span>
    </div>
</body>
<div class="dg1"><a href="https://p5.ssl.qhimgs1.com/t01db998b4ed22b1c05.jpg">这可能是个超链接？</a>这是用来搞<span
        class="s1">span</span>的</div>
<div class="dg2">这一定<a href="https://p5.ssl.qhimgs1.com/t01db998b4ed22b1c05.jpg">是个</a>超链接。</div>
<div class="dg3"><a href="https://p5.ssl.qhimgs1.com/t01db998b4ed22b1c05.jpg">这可能是个超链接？</a>这是用来搞<span
        class="s2">span</span>的</div>
<div class="d1">这一定<a href="https://p5.ssl.qhimgs1.com/t01db998b4ed22b1c05.jpg">是个</a>超链接。</div>
<div class="d2"><a href="https://p5.ssl.qhimgs1.com/t01db998b4ed22b1c05.jpg">这可能是个超链接？</a>这是用来搞<span
        class="s3">span</span>的</div>
<div class="d3">这一定<a href="https://p5.ssl.qhimgs1.com/t01db998b4ed22b1c05.jpg">是个</a>超链接。</a>这是用来搞<span
        class="s4">span</span>的</div>
</body>

</html>